<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Graphite</title>
		<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
		<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
		<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
		<link rel="manifest" href="site.webmanifest" />
		<link rel="mask-icon" href="safari-pinned-tab.svg" color="#473a3a" />
		<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5" />
		<meta name="apple-mobile-web-app-title" content="Graphite" />
		<meta name="application-name" content="Graphite" />
		<meta name="msapplication-TileColor" content="#ffffff" />
		<meta name="theme-color" content="#ffffff" />
		<meta name="color-scheme" content="dark only" />
		<meta name="darkreader-lock" />
		<!-- INDEX_HTML_HEAD_REPLACEMENT -->
	</head>
	<body>
		<noscript>JavaScript is required</noscript>
		<style>
			body {
				height: 100%;
				margin: 0;
			}

			body::before {
				content: "";
				position: absolute;
				inset: 0;
				background: #222;
			}

			body::after {
				content: "";
				display: block;
				position: absolute;
				left: 50%;
				top: 50%;
				width: 60px;
				height: 60px;
				border-radius: 50%;
				border: 4px solid #eee;
				border-color: #eee transparent #eee transparent;
				animation: spinning-loading-indicator 1s linear infinite;
			}

			@keyframes spinning-loading-indicator {
				0% {
					transform: translate(-30px, -30px) rotate(0deg);
				}
				100% {
					transform: translate(-30px, -30px) rotate(360deg);
				}
			}
		</style>
		<script type="module" src="src/main.ts"></script>
	</body>
</html>
